// NEED TO ENCAPSULATE THE SLIDER FUNCTIONALTY INTO SEPERATE FUNCTIONS
(function($){
	$.fn.slideBox = function(settings) {
		var config = {
		'maskHeight'  : '300px',
		'maskWidth'   : '400px',
		'maskZindex'  : '100',
		'maskPosition': 'relative',
		'overlay'     : true,
		'overlayId'   : 'overlay',
		'overlayType' : 'wholeBox',
		'overlayFire' : 'mouseenter',
		'overlayLeave': 'mouseleave',
		'animSpeed'   : 2000,
		'easing'      : 'swing',
		'topTitle'    : 'At the First Item',
		'bottomTitle' : 'At the Last Item',
		'delay'		: 1,
		'menuSpeed'	: 300,
		'slideClass'	: 'box',
		'displayNav'	: true
	};
	
	var settings = $.extend(config, settings);
	settings.defEasing = 'swing';
	$(this).data('animate', {state: true});
	if( $.easing.def) {
		$(this).data('easing', {plugin: true});
	}else {
		$(this).data('easing', {plugin: false});
		if(settings.easing != 'swing' && settings.easing != 'linear') {
			settings.easing = settings.defEasing;
		}
	}
	
	var inst = $(this).attr('id');
	var t = '';
	this.each(function(i) {
	
		// set up mask styles
		$(this).css({
			'overflow':'hidden',
			'height'  : settings.maskHeight,
			'width'   : settings.maskWidth,
			'z-index' : settings.maskZindex,
			'position': settings.maskPosition
		});
		
		// create the slider
		
		$(this).wrapInner('<div id="slider"></div>');
		
		//set up overlay
		if(settings.overlay) {
			var overLay = settings.overlayId + i;
			$('<div id="'+overLay+'" class="overlay-div"><a href="#" title="Previous" class="nav prev">Previous</a><a class="nav next" title="Next" href="#">Next</a></div>').prependTo(this);
			$('#'+overLay).css({
				'height'             : 0, 
				'z-index'            : 10001,
				'width'              : '100%', 
				'position'           : 'absolute',
				'top'                : 0,
				'background-color'   : '#fff',
				'background-image'   : 'url(images/hover-bg.gif)',
				'background-repeat'  : 'repeat-x',
				'display'            : 'none',
				'border-bottom'      : '1px solid #aeaeae'
			});
			if(settings.overlayType == 'strip') {
				$('<div id="hover-line" style="height:5px; width:100%; background-color:#000; z-index:10000; position:absolute; top:0; "></div>').prependTo(this);
				var hoverDiv = $('#hover-line');
				hoverDiv.bind(settings.overlayFire,function(){
					$('#'+overLay).animate({height: '30px', opacity: 'show'}, settings.menuSpeed, function() {
						$(this).bind(settings.overlayLeave,function(){
						$('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
					});
				});
			});
			}else {
			var hoverDiv = $(this);
				hoverDiv.hover(
					function(){
						if(t) {
							clearTimeout(t);
						}
			
						$('#'+overLay).animate({height: '30px', opacity: 'show'}, settings.menuSpeed);
					},
					function() {
						if(settings.delay > 0) {
							var timerCallback = function() {
							$('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
						};
						var time = (settings.delay * 1000);
						t = setTimeout(timerCallback, time);
			
						}else {
							$('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
						}
					}
				);
			
			}
			$('#'+overLay+' a.prev').addClass('atTop').attr('title', settings.topTitle);
		}
		
		// need to find the number of slides
		if(settings.displayNav) {
			var slides = $('.'+settings.slideClass).each(function(){}).length;
			$(this).parent().css('position','relative').append('<div id="index-counter" style="height:0; background-color:#000; position:absolute;"></div>');
			var parentHeight = parseInt($(this).height()) + parseInt($(this).parent().css('paddingTop'));
			$('#index-counter').css({'top': parentHeight, 'width': $(this).outerWidth()}).animate({'height':'30px'}, 500);
			$('#index-counter').html('<ul id="index-list"></ul>');
			$('.'+settings.slideClass).each(function(i){
				$('#index-list').append('<li id="ilist-'+ i +'" class="ilist"><a href="#">'+ i +'</a></li>');
				// TODO: add a click handler that takes you to that element.
			});
			$('.ilist').css({'display':'inline', 'margin': '0 5px'});
		}
		
		// set up click handling and animations
		$('#'+overLay+' a.nav').click(function(e){
			if($('#'+inst).data('animate').state) {
				if( $(this).hasClass('prev') ) {
					var offset = $('#slider').position();
					if($(this).hasClass('atTop')) {
						//do nothing, already at the top
					}else {
						$('#'+inst).data('animate', {state: false});
						$('#'+overLay+' a.next').removeClass('atBottom');
						$(this).data('clicked', {name: $(this).attr('class')});
						var h = (offset.top + $('.box').height());
						$('#slider').animate(
							{top: h+'px'}, 
							settings.animSpeed,
							settings.easing,
							function(){
								var o = $('#slider').position();
								if(o.top == 0) {
									$('#'+overLay+' a.prev').addClass('atTop').attr('title', settings.topTitle);
								}else {
									$('#'+overLay+' a.next').attr('title', 'Next');
								}
								$('#'+inst).data('animate', {state: true});
		
							}
						);
		
					}
		
				}
		
				if( $(this).hasClass('next') ) {
		
					var offset = $('#slider').position();
		
					if($(this).hasClass('atBottom')) {
						//do nothing, already at the bottom
					}else {
						$('#'+inst).data('animate', {state: false});
						$('#'+overLay+' a.prev').removeClass('atTop');
						var h = (offset.top - $('.box').height());
						$('#slider').animate(
							{top: h+'px'}, 
							settings.animSpeed,
							settings.easing,
							function(){
								var o  = $('#slider').position(),
								hi = $('#slider').height();
		
								if(( hi + o.top ) == $('.box').height() ) {
									$('#'+overLay+' a.next').addClass('atBottom').attr('title', settings.bottomTitle);
								}else {
									$('#'+overLay+' a.prev').attr('title', 'Previous');
								}
								$('#'+inst).data('animate', {state: true});
		
							}
						);
					}
				}
			}
		});
	
	});
	
	return this;
	
	};
})(jQuery);